<template>
  <div v-if="isMe" class="audio-card" @click="doPlay()">
    <img class="audio-card__control" v-if="!playing" src="../../../../assets/svg/语音播放按钮-右边.svg"/>
    <img class="audio-card__control" v-else src="../../../../assets/svg/语音暂停按钮-右边.svg"/>
    <div class="audio-card__bars">
      <div v-for="(item, index) in tone" class="audio-card__bars__cell-me" :style="getBarsCellStyle(item)" :key="index"></div>
      <div class="audio-card__bars__shade-box">
        <div class="audio-card__bars__shade-box__shade-me" :style="getSharStyle"></div>
      </div>
    </div>
    <div class="audio-card__times">{{times}}″</div>
  </div>
  <div v-else class="audio-card" @click="doPlay()">
    <img class="audio-card__control" v-if="!playing" src="../../../../assets/svg/语音播放按钮-左边.svg"/>
    <img class="audio-card__control" v-else src="../../../../assets/svg/语音暂停按钮-左边.svg"/>
    <div class="audio-card__bars">
      <div v-for="(item, index) in tone" class="audio-card__bars__cell-user" :style="getBarsCellStyle(item)" :key="index"></div>
      <div class="audio-card__bars__shade-box">
        <div class="audio-card__bars__shade-box__shade-user" :style="getSharStyle"></div>
      </div>
    </div>
    <div class="audio-card__times">{{times}}″</div>
  </div>
</template>

<script>
import Jindouyun from '../../../../utils/jindouyun'
import { mapState } from 'vuex'
import _ from 'lodash'
const _jindouyun = new Jindouyun({
  userId: '1111435842045702146',
  header: {},
  token: ''
})
export default {
  props: ['info', 'isMe', 'id'],
  data () {
    return {
      time: '',
      audio: {},
      timeShar: 0,
      playFlag: false,
      playing: false
    }
  },
  created () {
    const audio = document.createElement('audio')
    audio.src = this.getUrl
    let timenterval
    audio.addEventListener('canplay', () => {
      this.audio = audio
    })
    audio.addEventListener('play', () => {
      this.playFlag = true
      this.playing = true
      timenterval = setInterval(() => {
        this.timeShar = this.barsPercentages()
      }, 100)
    })
    audio.addEventListener('pause', () => {
      this.playing = false
      clearInterval(timenterval)
    })
    audio.addEventListener('ended', () => {
      this.playing = false
      clearInterval(timenterval)
      this.timeShar = 0
      const chatListMsg = this.chatList[this.roomId + '']
      const index = _.findIndex(chatListMsg, e => {
        return e.subType === 'audio'
      }, this.id + 1)
      if (index !== -1) {
        setTimeout(() => {
          this.$store.dispatch('app/setAudioPlayId', index)
        }, 100)
      } else {
        setTimeout(() => {
          this.$store.dispatch('app/setAudioPlayId', '')
        }, 100)
      }
    })
  },
  computed: {
    ...mapState('app', ['audioPlayId', 'roomId', 'chatList']),
    tone: function () {
      return JSON.parse(this.info.tone)
    },
    times: function () {
      if (this.info.duration) {
        return this.info.duration
      } else if (this.audio.duration) {
        return ~~this.audio.duration
      } else {
        return 0
      }
    },
    getUrl: function () {
      return _jindouyun.getDownloadUrl({ isPublic: false, fileId: this.info.sourceId })
    },
    currentTime: function () {
      return this.audio.currentTime
    },
    getSharStyle: function () {
      if (this.playFlag) {
        return {
          width: `${100 - (this.timeShar * 100)}%`
        }
      } else {
        return {
          width: '0px'
        }
      }
    }
  },
  methods: {
    doPlay () {
      if (this.audioPlayId !== this.id) {
        this.$store.dispatch('app/setAudioPlayId', this.id)
      } else {
        this.play()
      }
    },
    barsPercentages () {
      return this.audio.currentTime / this.audio.duration
    },
    play () {
      if (this.audio.paused) {
        this.audio.play()
      } else {
        this.audio.pause()
      }
    },
    getBarsCellStyle (height) {
      return {
        width: '5px',
        height: `${(18 * height) + 2}px`,
        marginLeft: '5px',
        borderRadius: '20px'
      }
    }
  },
  watch: {
    audioPlayId: {
      handler (data, olddata) {
        if (this.id === data && data !== '') {
          this.audio.currentTime = 0
          this.play()
        } else {
          if (!this.audio.paused) {
            this.audio.pause()
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.audio-card {
  display: flex;
  cursor: pointer;
  &__control {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  &__bars {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: 5px;
    &__cell-me {
      background-color: white;
    }
        &__cell-user {
      background-color: black;
    }
    &__shade-box {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      justify-content: flex-end;
      &__shade-me {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background-color: #3478f5;
      }
      &__shade-user {
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: 100;
        background-color: rgb(245, 245, 245);
      }
    }
  }
}
</style>
